<template>
  <view class="ver-layout">
    <view class="top-bg"></view>
    <!--  vip等级  -->
    <view class="ver-layout vip-card-layout">
      <view class="hor-layout-side-center">
        <view style="font-weight: bold">Total VIP rewards amount</view>
        <view>N0.0</view>
      </view>
      <view class="info-layout hor-layout-center">
        <view class="hor-layout-center">
          <view class="left-tag">VIP{{ currentGrade }}</view>
          <view class="mid-line hor-layout-center" style="position: relative">
            <view class="left-line" :style="leftLineStyle"></view>
            <view class="progress-tag ver-layout-center" :style="progressTagStyle">
              <view class="tag-content">{{ progress }}</view>
              <view class="tag-line"></view>
            </view>
            <view class="right-line" :style="rightLineStyle"></view>
          </view>
          <view class="right-tag">VIP{{ nextGrade }}</view>
        </view>
        <view style="margin-left: 10px">50/100</view>
      </view>
      <view class="divider-line"></view>
      <view class="hor-layout-side-center">
        <view style="font-weight: bold;color: #886d2a">VIP points details</view>
        <view style="width: 50px">
          <u-button size="mini" :plain="true" text="click"></u-button>
        </view>
      </view>
    </view>
    <!--  vip power  -->
    <view class="card-layout info-card">
      <view class="title">VIP power</view>
      <view class="hor-layout-center-all grade-progress-layout">
        <view v-for="(item,index) in gradleList" :key="index" class="hor-layout">
          <view class="ver-layout-center">
            <view style="font-size: small">VIP{{ item }}</view>
            <ali-icon font="icon-huiyuandengji" size="30"></ali-icon>
            <view style="font-size: xx-small">{{ item }}</view>
          </view>
          <progress v-if="item!==gradleList.length" class="progress-line" :percent="getGradeProgress(item)"
                    stroke-width="3"/>
        </view>
      </view>
      <view class="hor-layout-center-all">
        <view class="grade-info-card ver-layout-center">
          <ali-icon font="icon-huiyuandengji" size="30"></ali-icon>
          <view>You are in 0.0% rebate</view>
        </view>
        <view class="grade-info-card ver-layout-center">
          <ali-icon font="icon-huiyuandengji" size="30"></ali-icon>
          <view>Next level 0.5% rebate</view>
        </view>
      </view>
    </view>
    <!--  记录  -->
    <view class="card-layout info-card">
      <view class="title">Complete tasks to win VIP points</view>
      <view v-for="(item,index) in pointList" class="hor-layout-side-center vip-points-item">
        <view>{{ item.title }}</view>
        <view style="width: 60px">
          <u-button size="mini" type="primary" text="+50"></u-button>
        </view>
      </view>
    </view>
    <!--  介绍  -->
    <view class="card-layout info-card" style="margin-bottom: 20px;padding: 13px">
      <view class="hor-layout" v-for="(item,index) in hintList" :key="index">
        <view class="num-icon">{{ index + 1 }}</view>
        <view class="ver-layout">
          <view style="font-weight: bold;line-height: 30px">{{ item.title }}</view>
          <view style="line-height: 20px" v-for="(cItem,cIndex) in item.content" :key="cIndex">
            {{ cItem }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "vipPoints",
  data() {
    return {
      progress: 50,
      currentGrade: 2,
      nextGrade: 3,
      gradleList: [1, 2, 3, 4, 5],
      hintList: [
        {
          title: 'How to gain VIP Points?',
          content: [
            '$100 transaction have been made successfully;',
            '100 Points will be added to your account.',
            '500 Points will be added to your account when you invite a fresh user successfully.',
          ]
        },
        {
          title: 'How to gain VIP Points?',
          content: [
            '$100 transaction have been made successfully;',
            '100 Points will be added to your account.',
            '500 Points will be added to your account when you invite a fresh user successfully.',
          ]
        }
      ],
      pointList: [
        {title: 'Bind Mobile phone'},
        {title: 'Bind Email'},
        {title: 'Bind Facebook'},
        {title: 'Bind Whatsapp'},
        {title: 'Bind Google'},
        {title: 'Sell now for cash'},
      ]
    }
  },
  computed: {
    leftLineStyle() {
      return {width: `${this.progress}%`}
    },
    rightLineStyle() {
      return {width: `${100 - this.progress}%`}
    },
    progressTagStyle() {
      return {left: `calc(${this.progress}% - 9px)`}
    },
  },
  methods: {
    getGradeProgress(item) {
      if (this.currentGrade > item) return 100
      else if (this.currentGrade == item) return this.progress
      else return 0
    }
  }
}
</script>

<style scoped lang="scss">
.page-layout {
  //background: white;
}

.top-bg {
  height: 120px;
  background: linear-gradient(to bottom, #55BBB3 0%, #abdcff 100%);
}

.vip-card-layout {
  padding: 10px;
  margin: auto;
  margin-top: -100px;
  color: white;
  font-weight: lighter;
  width: calc(100% - 10 * 2px - 10 * 2px);
  background: linear-gradient(to right, #ed8f03 0%, #ffb75e 100%);
  border-radius: 10px;

  .info-layout {
    margin-top: 30px;
    font-size: xx-small;

    .left-tag {
      background: white;
      border-radius: 2px;
      padding: 1px 3px;
      color: goldenrod;
    }

    .mid-line {
      width: 150px;
      height: 3px;

      .left-line {
        width: 20%;
        height: 100%;
        background: white;
      }

      .progress-tag {
        position: absolute;
        left: calc(20% - 9px);
        top: -23px;

        .tag-content {
          width: 18px;
          background: white;
          border-radius: 2px;
          text-align: center;
          color: goldenrod;
        }

        .tag-line {
          width: 1px;
          height: 10px;
          background: white;
        }
      }

      .right-line {
        width: 80%;
        height: 100%;
        background: goldenrod;
      }
    }

    .right-tag {
      background: goldenrod;
      border-radius: 2px;
      padding: 1px 3px;
      color: white;
    }
  }

  .divider-line {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 1px;
    width: 100%;
    background: white;
  }
}

.card-layout.info-card {
  margin: auto;
  width: calc(100% - 10 * 2px - 10 * 2px);
  background: white;
  border-radius: 10px;
  //
  margin-top: 15px;
  font-size: smaller;

  .title {
    font-size: medium;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    padding-left: 12px;
    border-bottom: 1px solid #eaeaea;
  }

  .grade-progress-layout {
    margin-top: 20px;
    margin-bottom: 20px;

    .progress-line {
      width: 40px;
      margin-left: -5px;
      margin-right: -5px;
    }
  }

  .grade-info-card {
    border-radius: 3px;
    padding: 5px 20px;
    background: #dde4e6;
    width: 76px;
    margin: 10px;
  }

  .vip-points-item {
    margin: 0px 10px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eaeaea;
  }

  .num-icon {
    margin-right: 10px;
    width: 35px;
    height: 30px;
    color: white;
    line-height: 25px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-image: url();
  }
}
</style>
